<template>
  <div class="courses-nav">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :router="true"
    >
      <el-menu-item index="/Admin/manage/TeachingMange">教师管理</el-menu-item>
      <el-menu-item index="/Admin/manage/ManageClass/StudentTeachMange">
        选手管理
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "",
      roles: "",
    };
  },
  created() {
    let self = this;
    // 从状态管理获取roles
    self.roles = self.$store.state.user.roles[0];
    self.fetchDate();
  },
  methods: {
    fetchDate() {
      let self = this;
      var cur_path = self.$route.meta.navActive; //获取当前路由
      self.activeIndex = cur_path;
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  watch: {
    $route: "fetchDate",
  },
};
</script>
<style lang="scss" scoped>
.courses-nav {
  .el-menu-demo {
    .el-menu-item {
      &:hover {
        color: #1277eb;
      }
    }
  }
}
</style>
